<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MD5加密工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">MD5加密工具</h1>
        <form onsubmit="return false;">
            <div class="form-group">
                <label for="inputText">请输入要加密的文本：</label>
                <textarea class="form-control" id="inputText" rows="3"></textarea>
            </div><br />
            <button type="button" class="btn btn-primary" onclick="encrypt()">加密</button>
        </form>
        <div class="mt-4">
            <p>加密结果：</p>
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="md5Upper32">32位大写：</label>
                        <input type="text" class="form-control" id="md5Upper32" readonly>
                    </div>
                    <div class="form-group">
                        <label for="md5Lower32">32位小写：</label>
                        <input type="text" class="form-control" id="md5Lower32" readonly>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="md5Upper16">16位大写：</label>
                        <input type="text" class="form-control" id="md5Upper16" readonly>
                    </div>
                    <div class="form-group">
                        <label for="md5Lower16">16位小写：</label>
                        <input type="text" class="form-control" id="md5Lower16" readonly>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/crypto-js.min.js"></script>
    <script>
        function encrypt() {
            const inputText = document.getElementById("inputText").value;
            const md5Hash = CryptoJS.MD5(inputText);
            
            document.getElementById("md5Upper32").value = md5Hash.toString().toUpperCase();
            document.getElementById("md5Lower32").value = md5Hash.toString().toLowerCase();
            document.getElementById("md5Upper16").value = md5Hash.toString().substr(8, 16).toUpperCase();
            document.getElementById("md5Lower16").value = md5Hash.toString().substr(8, 16).toLowerCase();
        }
    </script>
</body>
</html>
